<template>
  <div class="system-info">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/syslog' }">系统日志</el-breadcrumb-item>
        <el-breadcrumb-item>发布版本</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      <el-card class="box-card">
        <div class="card-title">发布版本</div>
        <el-form label-width="100px" :model="creatDev" :rules="creatDevRules" ref="creatDev">
          <el-row :gutter="24">
            <el-col :span="12">
              <!-- 发布时间 -->
              <el-form-item label="发布时间" prop="time">
                <el-date-picker
                  style="width:100%;"
                  v-model="creatDev.time"
                  type="datetime"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 发布版本 -->
              <el-form-item label="发布版本" prop="dev">
                <el-input v-model="creatDev.dev" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="devContent">
            <label>发布内容</label>
            <u-e class="devHtml" @content="logHtml"></u-e>
          </el-row>
        </el-form>
         <div class="card-line">
          <!-- 确认 -->
          <el-button type="primary" size="small" @click="saveLog('creatDev')">确认</el-button>
          <!-- 返回 -->
          <el-button size="small" style="float:right" @click="goBack">返回</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import UE from '@/components/UE/index.vue';
import { _debounce } from '@/public/debounce.js';
import moment from 'moment';
export default {
  name: 'addLog',
  components: {
    UE
  },
  data () {
    return {
      creatDev: {
        time: '',
        dev: '',
        content: ''
      },
      creatDevRules: {
        time: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
        dev: [{ required: true, message: '请输入版本号', trigger: 'blur' }]
      }
    };
  },
  methods: {
    logHtml: data => {
      sessionStorage.setItem('saveHtml', '');
      sessionStorage.setItem('saveHtml', data);
    },
    saveLog: _debounce(function (formName) {
      let _this = this;
      // 表单验证规则
      _this.$refs[formName].validate(valid => {
        if (valid) {
          let params = {
            releaseTime: moment(_this.creatDev.time).format('YYYY-MM-DD HH:mm:ss'),
            editionNo: _this.creatDev.dev,
            note: sessionStorage.getItem('saveHtml')
          };
          //  发布版本接口
          _this.$http.raw('api/insertEdition', params).then(res => {
            let { code } = res;
            if (code === 0) {
              _this.$message({
                message: '发布成功！',
                type: 'success'
              });
              _this.$router.push({ path: '/home/syslog' });
            }
          }).catch(err => {
            // 服务器响应错误提示
            if (err === undefined) {
              _this.$message({
                message: '服务器响应异常！',
                type: 'error'
              });
              return false;
            }
          });
        }
      });
    }, 200),

    // 返回
    goBack () {
      this.$router.push({ path: '/home/syslog' });
    }
  }
};
</script>

<style lang='scss' scoped>
@import './index.scss';
</style>
